<script setup lang="ts">
import { onMounted } from 'vue';
import { state } from './state';
import dayjs from 'dayjs';
import { reLaunch } from '@tarojs/taro';
import { APPOINTMENT_STATISTICS } from '/@/api/modules/visitor/visitor-appointment-record-statistics';
onMounted(() => {
  appointmentStatistics();
});
/**
 * 访客邀请统计
 */
function appointmentStatistics() {
  const startTime = dayjs().hour(0).minute(0).second(0).valueOf();
  const endTime = dayjs().hour(23).minute(59).second(59).valueOf();
  APPOINTMENT_STATISTICS({ startTime, endTime }).then((res) => {
    state.statisticsDto = res.statisticsDto;
    timeLineChart();
    departmentBar();
  });
}

//折线图
function timeLineChart() {
  const xDataList: string[] =
    state.statisticsDto?.hourTotalDto?.map((item) => {
      return item.target + ':00';
    }) || [];

  const yDataList: number[] =
    state.statisticsDto?.hourTotalDto?.map((item) => {
      return item.totalSignInQuantity || 0;
    }) || [];
  state.timeOption = {
    legend: {
      type: 'scroll',
      orient: 'vertical',
      data: ['访客'],
      top: '4%',
      icon: 'rect',
      itemHeight: 5,
    },
    xAxis: {
      type: 'category',
      data: xDataList,
    },
    yAxis: {
      type: 'value',
      minInterval: 1,
    },
    series: [
      {
        name: '访客',
        data: yDataList,
        type: 'line',
        smooth: true,
        itemStyle: {
          color: '#507AEE',
        },
      },
    ],
  };
}

//柱形图
function departmentBar() {
  const xDataList: string[] = state.statisticsDto?.orgTotalDto?.map((item) => {
    return item.target || '';
  }) || [''];

  const yDataList1: number[] = state.statisticsDto?.orgTotalDto?.map((item) => {
    return item.totalSignInQuantity || 0;
  }) || [0];
  const yDataList2: number[] = state.statisticsDto?.orgTotalDto?.map((item) => {
    return item.totalUnSignInQuantity || 0;
  }) || [0];
  state.departOption = {
    legend: {
      orient: 'vertical',
      data: ['已到', '未到'],
      top: '4%',
      icon: 'rect',
      itemHeight: 5,
    },
    xAxis: {
      type: 'category',
      data: xDataList,
    },
    yAxis: {
      type: 'value',
      minInterval: 1,
    },
    series: [
      {
        name: '已到',
        data: yDataList1,
        type: 'bar',
        stack: 'Ad',
        itemStyle: {
          color: '#507AEE',
        },
      },
      {
        name: '未到',
        data: yDataList2,
        type: 'bar',
        stack: 'Ad',
        itemStyle: {
          color: '#62C7F1',
        },
      },
    ],
  };
}
</script>

<template>
  <view class="visitor-release-statistics app-page--1">
    <app-navbar title="访客放行" />
    <nut-tabs
      model-value="statistics"
      @click="
        ({ paneKey }) => {
          if (paneKey === 'list') {
            reLaunch({ url: '/pages/visitor/release/index' });
          }
        }
      "
    >
      <nut-tab-pane title="访客放行" pane-key="list" />
      <nut-tab-pane title="数据统计" pane-key="statistics" />
    </nut-tabs>
    <scroll-view class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
      <view class="visitor-release-statistics__wrapper2">
        <nut-cell-group>
          <nut-cell title="访客统计" />
          <nut-cell>
            <template v-slot:title>
              <view class="visitor-release-statistics__visitor-wrapper">
                <view class="visitor-release-statistics__visitor-total">
                  <view class="visitor-release-statistics__visitor-title"
                    ><text>{{ state.statisticsDto?.visitorTotal || '0' }}</text></view
                  >
                  <view><text>访客总数</text></view>
                </view>
                <view class="visitor-release-statistics__visitor-arrived">
                  <view class="visitor-release-statistics__visitor-title"
                    ><text>{{ state.statisticsDto?.visitorSignInTotal || '0' }}</text></view
                  >
                  <view><text>已到访客</text></view>
                </view>
              </view>
            </template>
          </nut-cell>
        </nut-cell-group>
        <nut-cell-group>
          <nut-cell title="时间分布" />
          <nut-cell>
            <template v-slot:title>
              <app-e-chart :option="state.timeOption"></app-e-chart>
            </template>
          </nut-cell>
        </nut-cell-group>
        <nut-cell-group>
          <nut-cell title="拜访部门" />
          <nut-cell>
            <template v-slot:title>
              <app-e-chart :option="state.departOption"></app-e-chart>
            </template>
          </nut-cell>
        </nut-cell-group>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
